<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@include file="../include/taglibs.jsp"%>

<c:url var="homeUrl" value="/" />
<c:url var="restPollGameUrl" value="/rest/games/${game.id}/" />
<c:url var="restUnloadUrl" value="/rest/games/${game.id}/players/${player.name}/" />
<c:url var="restMarkUrl" value="/rest/boards/${board.id}/" />
<c:url var="imagesUrl" value="/images/" />

<fmt:message key="new.title" var="titleLabel" scope="page"/>
<fmt:message key="new.size" var="sizeLabel" scope="page"/>
<fmt:message key="new.description" var="descriptionLabel" scope="page"/>

<script type="text/javascript">
	var playerList;
	
	var finished = false;
	
	var board = [<c:set var="row" value="1" scope="page" /> 
	<c:forEach var="rowList" items="${board.buzzwordList}">
		  [<c:set var="col" value="1" scope="page" />
			<c:forEach var="buzzword" items="${rowList}">
					${buzzword.marked}
					<c:if test="${col != board.size}">,</c:if>
					<c:set var="col" value="${col+1}" scope="page" />
			</c:forEach>]<c:if test="${row != board.size}">,</c:if>
		  <c:set var="row" value="${row+1}" scope="page" />
	</c:forEach>
	];

	function updatePlayerList(xml) {
		if (xml != undefined) {
			var playerListHtml = "";
			$(xml).find('player').each(function() {
				playerListHtml +=  "<li>" + $(this).find('name').text() + "</li>";
			});
			playerList.html(playerListHtml);
		}
	}
	
	function updateWinner(xml) {
		if (!finished && xml != undefined) {			
			$(xml).find('winner').each(function() {
				var winnerName = $(this).find('name').text();
				if (winnerName == "${player.name}") {
					$("#winnerDialog").css("display", "block");
				}
				else {
					$("#loserDialog").find('h3').text("Spieler " + winnerName + " hat gewonnen!");
					$("#loserDialog").css("display", "block");
				}
				finished = true;
				$(document).oneTime(5000, function(i) {
    					location.replace("${homeUrl}");
				}, 0);
			});
		}
	}
	
	function pollServerForGame() {
		$.ajax({
			type: "GET",
			url: "${restPollGameUrl}",
			ifModified: true,
			dataType: "xml",
			username: "${player.name}",
			password: "${sessionId}",
			success: function(xml) {
				updatePlayerList(xml);
				updateWinner(xml);
			}
		});
	}
	
	function reportUnload() {
		$.ajax({
			type: "DELETE",
			url: "${restUnloadUrl}",
			username: "${player.name}",
			password: "${sessionId}"
		});
	}

    $(document).ready(function() {
    	playerList = $("#playerList");
    	
    	$(document).everyTime(${pollInterval}, function(i) {
    		pollServerForGame();
		}, 0);
		
		jQuery(window).bind("beforeunload", function() {
			reportUnload(); 
		});
    });
    
    function updateBoard(row, col) {
    	if (board[row][col]) {
    		jQuery("#row-" + row + "-col-" + col).css("background-color", "red");
    	}
    	else {
    		jQuery("#row-" + row + "-col-" + col).css("background-color", "transparent");
    	}
    }
    
    function mark(row, col) {
    	if (!finished) {
	    	board[row][col] = !board[row][col];
	    	var boardData = "<board><buzzwords>" +
	    	<c:set var="row" value="0" scope="page" />
			<c:forEach var="rowList" items="${board.buzzwordList}">
			<c:set var="col" value="0" scope="page" />
			<c:forEach var="buzzword" items="${rowList}">
			"<buzzword><row>${row}</row><col>${col}</col><text>${buzzword.buzzword}</text><marked>" + board[${row}][${col}] + "</marked></buzzword>" +
			<c:set var="col" value="${col+1}" scope="page" />
			</c:forEach>
			<c:set var="row" value="${row+1}" scope="page" />
			</c:forEach>
			"</buzzwords></board>";
			
	    	$.ajax({
				type: "PUT",
				url: "${restMarkUrl}",
				dataType: "xml",
				data: boardData,
				processData: false,
				username: "${player.name}",
				password: "${sessionId}",
				success: function(data) {
					updateBoard(row, col);
					pollServerForGame();
				}
			});
		}
    }
</script>

<div class="divTable">
<div>
<div style="width:100%; text-align:center; vertical-align:middle;">

	<table style="text-align:center; background:red; margin:auto auto;">
			<tr>
				<td style="text-align:center; color:white; font-size:200%;">B I N G O</td>
			</tr>
			<tr>
				<td>
					<table style="background:red">
						<c:set var="row" value="1" scope="page" />
						<c:forEach var="rowList" items="${board.buzzwordList}">
							<tr style="height:80px; background:white; text-align:center">
								<c:set var="col" value="1" scope="page" />
								<c:forEach var="buzzword" items="${rowList}">
									<td id="row-${row-1}-col-${col-1}"
									style="width:${100 div board.size}%; min-width:80px; <c:if test="${buzzword.marked}">background:red;</c:if>"
									>
										<c:if test="${buzzword.buzzword != ''}">
										<a style="display:block; line-height:80px; height:80px; width:100%; color:black; text-decoration:none;" href="#" onclick="mark(${row-1}, ${col-1})">${buzzword.buzzword}</a>
										</c:if>
									</td>
									<c:set var="col" value="${col+1}" scope="page" />
								</c:forEach>
							</tr>
							<c:set var="row" value="${row+1}" scope="page" />
						</c:forEach>
					</table>
				</td>
			</tr>
		</table>
</div>
<div style="min-width:200px">
<h1>Spiel</h3>

<h4 style="margin-bottom:0px">${titleLabel}</h4>
<div>${game.title}</div>

<h4 style="margin-bottom:0px">${sizeLabel}</h4>
<div>${game.size}</div>

<c:if test="${game.description}">
<h4 style="margin-bottom:0px">${descriptionLabel}</h4>
<div>${game.description}</div>
</c:if>

<h4 style="margin-bottom:10px">Spielerliste:</h4>
<ul id="playerList">
	<c:forEach var="player" items="${game.players}">
		<li>${player.name}</li>
	</c:forEach>
</ul>	
</div>
</div>
</div>

<div id="winnerDialog">
<h2>BINGO!</h2>
<img src="${imagesUrl}fuckyea.png" />
<h3>Du hast gewonnen!</h3>
</div>


<div id="loserDialog">
<h2>VERLOREN!</h2>
<img src="${imagesUrl}fuuuuuu.png" />
<h3></h3>
</div>
